<template>
  <div class="auth-container">
    <!-- 主容器白色卡片 -->
    <div class="auth-card">
      <!-- 左侧图片区域 -->
      <div class="auth-left">
        <div class="decoration-content">
          <!-- 标题和描述 -->
          <div class="brand-section">
            <h1 class="brand-title">酒店管理系统</h1>
            <p class="brand-description">
              提供全方位的酒店客房管理、预订处理和客户服务解决方案，让酒店管理更高效、更智能。
            </p>
          </div>
          
          <!-- 特性列表 -->
          <div class="features">
            <div class="feature-item" v-for="(feature, index) in features" :key="index">
              <div class="feature-icon">
                <font-awesome-icon :icon="feature.icon" />
              </div>
              <div class="feature-content">
                <h3>{{ feature.title }}</h3>
                <p>{{ feature.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧表单区域 -->
      <div class="auth-right">
        <!-- 移动端标题 -->
        <div class="mobile-header">
          <h1 class="mobile-title">酒店管理系统</h1>
          <p class="mobile-subtitle">高效、智能的酒店管理解决方案</p>
        </div>

        <!-- 标签页切换 -->
        <div class="tabs">
          <button 
            class="tab-item" 
            :class="{ active: activeTab === 'login' }"
            @click="activeTab = 'login'"
          >
            登录
          </button>
          <button 
            class="tab-item" 
            :class="{ active: activeTab === 'register' }"
            @click="activeTab = 'register'"
          >
            注册
          </button>
        </div>
        
        <!-- 登录表单 -->
        <div v-show="activeTab === 'login'" class="form-content">
          <div class="form-header">
            <h2 class="form-title">欢迎回来</h2>
            <p class="form-subtitle">请登录您的账户继续访问系统</p>
          </div>
          
          <a-form
            :model="loginForm"
            :rules="loginRules"
            @submit="handleLogin"
            class="auth-form"
            layout="vertical"
          >
            <a-form-item field="username" label="用户名" :rules="loginRules.username" hide-label>
              <a-input
                v-model="loginForm.username"
                placeholder="请输入用户名"
                size="large"
                allow-clear
              >
                <template #prefix>
                  <font-awesome-icon icon="user" />
                </template>
              </a-input>
            </a-form-item>
            
            <a-form-item field="password" label="密码" :rules="loginRules.password" hide-label>
              <a-input-password
                v-model="loginForm.password"
                placeholder="请输入密码"
                size="large"
                allow-clear
              >
                <template #prefix>
                  <font-awesome-icon icon="lock" />
                </template>
              </a-input-password>
            </a-form-item>
            
            <a-form-item>
              <div class="form-options">
                <a-checkbox v-model="loginForm.remember">
                  <span class="remember-text">记住我</span>
                </a-checkbox>
                <a-link class="forgot-link">忘记密码？</a-link>
              </div>
            </a-form-item>
            
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
                size="large"
                :loading="loginLoading"
                long
                class="submit-btn"
              >
                <template #icon v-if="!loginLoading">
                  <font-awesome-icon icon="arrow-right" />
                </template>
                {{ loginLoading ? '登录中...' : '登录' }}
              </a-button>
            </a-form-item>
          </a-form>
          
          <!-- 注册链接 -->
          <div class="switch-link-section">
            <span class="switch-text">没有账户？</span>
            <a class="switch-link" @click="activeTab = 'register'">立即注册</a>
          </div>

          <!-- 其他登录方式 -->
          <div class="divider">
            <span>或使用以下方式登录</span>
          </div>
          
          <div class="social-login">
            <button class="social-btn">
              <font-awesome-icon :icon="['fab', 'weixin']" />
            </button>
            <button class="social-btn">
              <font-awesome-icon :icon="['fab', 'qq']" />
            </button>
            <button class="social-btn">
              <font-awesome-icon :icon="['fab', 'weibo']" />
            </button>
          </div>
        </div>

        <!-- 注册表单 -->
        <div v-show="activeTab === 'register'" class="form-content">
          <div class="form-header">
            <h2 class="form-title">创建账户</h2>
            <p class="form-subtitle">请填写以下信息注册新账户</p>
          </div>
          
          <a-form
            :model="registerForm"
            :rules="registerRules"
            @submit="handleRegister"
            class="auth-form"
            layout="vertical"
          >
            <a-form-item field="username" label="用户名" :rules="registerRules.username" hide-label>
              <a-input
                v-model="registerForm.username"
                placeholder="请输入用户名"
                size="large"
                allow-clear
              >
                <template #prefix>
                  <font-awesome-icon icon="user" />
                </template>
              </a-input>
            </a-form-item>

            <a-form-item field="email" label="电子邮箱" :rules="registerRules.email" hide-label>
              <a-input
                v-model="registerForm.email"
                placeholder="请输入电子邮箱"
                size="large"
                allow-clear
              >
                <template #prefix>
                  <font-awesome-icon icon="envelope" />
                </template>
              </a-input>
            </a-form-item>
            
            <a-form-item field="password" label="密码" :rules="registerRules.password" hide-label>
              <a-input-password
                v-model="registerForm.password"
                placeholder="请输入密码"
                size="large"
                allow-clear
              >
                <template #prefix>
                  <font-awesome-icon icon="lock" />
                </template>
              </a-input-password>
            </a-form-item>

            <a-form-item field="confirmPassword" label="确认密码" :rules="registerRules.confirmPassword" hide-label>
              <a-input-password
                v-model="registerForm.confirmPassword"
                placeholder="请再次输入密码"
                size="large"
                allow-clear
              >
                <template #prefix>
                  <font-awesome-icon icon="lock" />
                </template>
              </a-input-password>
            </a-form-item>
            
            <a-form-item>
              <a-checkbox v-model="registerForm.agree">
                <span class="agree-text">我已阅读并同意</span>
                <a-link class="terms-link" href="#">服务条款</a-link>
                <span class="agree-text">和</span>
                <a-link class="terms-link" href="#">隐私政策</a-link>
              </a-checkbox>
            </a-form-item>
            
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
                size="large"
                :loading="registerLoading"
                :disabled="!registerForm.agree"
                long
                class="submit-btn register-btn"
              >
                <template #icon v-if="!registerLoading">
                  <font-awesome-icon icon="user-plus" />
                </template>
                {{ registerLoading ? '注册中...' : '注册' }}
              </a-button>
            </a-form-item>
          </a-form>
          
          <!-- 登录链接 -->
          <div class="switch-link-section">
            <span class="switch-text">已有账户？</span>
            <a class="switch-link" @click="activeTab = 'login'">立即登录</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { encrypt, decrypt } from '@/utils/crypto'
import { Message } from '@arco-design/web-vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { 
  faUser, 
  faLock, 
  faHotel,
  faArrowRight,
  faBed,
  faCalendarCheck,
  faUsers,
  faEnvelope,
  faUserPlus
} from '@fortawesome/free-solid-svg-icons'
import { 
  faWeixin,
  faQq,
  faWeibo
} from '@fortawesome/free-brands-svg-icons'

// 添加图标到库
library.add(
  faUser, 
  faLock, 
  faHotel,
  faArrowRight,
  faBed,
  faCalendarCheck,
  faUsers,
  faWeixin,
  faQq,
  faWeibo,
  faEnvelope,
  faUserPlus
)

const router = useRouter()
const userStore = useUserStore()

// 当前激活的标签页
const activeTab = ref('login')

// 特性列表
const features = [
  {
    icon: 'bed',
    title: '客房管理',
    description: '轻松管理客房状态和信息'
  },
  {
    icon: 'calendar-check',
    title: '预订处理',
    description: '高效处理客户预订请求'
  },
  {
    icon: 'users',
    title: '客户服务',
    description: '提供优质客户服务体验'
  }
]

// 登录表单
const loginForm = ref({
  username: '',
  password: '',
  remember: false
})

const loginLoading = ref(false)

const loginRules = {
  username: [
    { required: true, message: '请输入用户名' },
    { minLength: 3, message: '用户名至少3个字符' }
  ],
  password: [
    { required: true, message: '请输入密码' },
    { minLength: 6, message: '密码至少6个字符' }
  ]
}

// 注册表单
const registerForm = ref({
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
  agree: false
})

const registerLoading = ref(false)

const registerRules = {
  username: [
    { required: true, message: '请输入用户名' },
    { minLength: 3, message: '用户名至少3个字符' },
    { maxLength: 20, message: '用户名最多20个字符' }
  ],
  email: [
    { required: true, message: '请输入邮箱' },
    { type: 'email', message: '请输入有效的邮箱地址' }
  ],
  password: [
    { required: true, message: '请输入密码' },
    { minLength: 6, message: '密码至少6个字符' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码' },
    {
      validator: (value, callback) => {
        if (value !== registerForm.value.password) {
          callback('两次输入的密码不一致')
        } else {
          callback()
        }
      }
    }
  ]
}

// 加载记住的账号
const loadRememberedAccount = () => {
  const encryptedUsername = localStorage.getItem('remembered_username')
  const encryptedPassword = localStorage.getItem('remembered_password')
  
  if (encryptedUsername && encryptedPassword) {
    const username = decrypt(encryptedUsername)
    const password = decrypt(encryptedPassword)
    
    if (username && password) {
      loginForm.value.username = username
      loginForm.value.password = password
      loginForm.value.remember = true
    }
  }
}

// 组件挂载时加载记住的账号
onMounted(() => {
  loadRememberedAccount()
})

// 处理登录
const handleLogin = async (data) => {
  if (data.errors) return
  
  loginLoading.value = true
  try {
    const success = await userStore.loginUser({
      username: loginForm.value.username,
      password: loginForm.value.password
    })
    
    if (success) {
      // 根据"记住我"选项保存或清除账号信息
      if (loginForm.value.remember) {
        const encryptedUsername = encrypt(loginForm.value.username)
        const encryptedPassword = encrypt(loginForm.value.password)
        
        localStorage.setItem('remembered_username', encryptedUsername)
        localStorage.setItem('remembered_password', encryptedPassword)
      } else {
        localStorage.removeItem('remembered_username')
        localStorage.removeItem('remembered_password')
      }
      
      router.push('/')
    }
  } finally {
    loginLoading.value = false
  }
}

// 处理注册
const handleRegister = async (data) => {
  if (data.errors) return
  
  if (!registerForm.value.agree) {
    Message.warning('请阅读并同意服务条款和隐私政策')
    return
  }
  
  registerLoading.value = true
  try {
    // TODO: 调用注册API
    Message.success('注册成功！即将跳转到登录...')
    setTimeout(() => {
      activeTab.value = 'login'
      // 清空注册表单
      registerForm.value = {
        username: '',
        email: '',
        password: '',
        confirmPassword: '',
        agree: false
      }
    }, 1500)
  } catch (error) {
    console.error('注册错误:', error)
    Message.error('注册失败，请重试')
  } finally {
    registerLoading.value = false
  }
}
</script>

<style scoped lang="scss">
.auth-container {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: linear-gradient(to bottom right, #f5f7fa, #ffffff);
  padding: 40px 20px;
  position: relative;
  
  // 背景图片装饰 - 匹配原型图
  &::before {
    content: '';
    position: fixed;
    inset: 0;
    background: url('https://picsum.photos/id/1048/1920/1080') center/cover;
    opacity: 0.05;
    z-index: 0;
  }
  
  // 渐变叠加
  &::after {
    content: '';
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, rgba(22, 93, 255, 0.03) 0%, rgba(54, 207, 201, 0.03) 100%);
    z-index: 0;
  }
}

// 主容器白色卡片
.auth-card {
  width: 100%;
  max-width: 1200px;
  min-height: 680px;
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  position: relative;
  z-index: 1;
  
  @media (max-width: 767px) {
    flex-direction: column;
    max-width: 500px;
    min-height: auto;
  }
}

// 左侧图片区域
.auth-left {
  flex: 0 0 50%;
  position: relative;
  background: url('https://picsum.photos/id/1048/800/1000') center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  
  @media (max-width: 767px) {
    display: none;
  }
  
  // 渐变遮罩
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(22, 93, 255, 0.8), rgba(54, 207, 201, 0.8));
    mix-blend-mode: multiply;
  }

  .decoration-content {
    position: relative;
    z-index: 1;
    color: white;
    max-width: 100%;
  }

  .brand-section {
    margin-bottom: 60px;

    .brand-title {
      font-size: clamp(1.5rem, 3vw, 2.5rem);
      font-weight: 700;
      margin: 0 0 16px;
      letter-spacing: -0.02em;
    }

    .brand-description {
      font-size: 18px;
      opacity: 0.9;
      margin: 0;
      line-height: 1.6;
    }
  }

  .features {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .feature-item {
      display: flex;
      align-items: center;
      gap: 12px;

      .feature-icon {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        flex-shrink: 0;
      }

      .feature-content {
        flex: 1;

        h3 {
          font-size: 16px;
          font-weight: 500;
          margin: 0 0 4px;
        }

        p {
          font-size: 14px;
          opacity: 0.8;
          margin: 0;
          line-height: 1.4;
        }
      }
    }
  }
}

// 右侧表单区域
.auth-right {
  flex: 0 0 50%;
  padding: 48px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  @media (max-width: 767px) {
    padding: 32px 24px;
  }
}

// 移动端标题
.mobile-header {
  display: none;
  text-align: center;
  margin-bottom: 32px;
  
  @media (max-width: 767px) {
    display: block;
  }
  
  .mobile-title {
    font-size: 24px;
    font-weight: 700;
    color: #165DFF;
    margin: 0 0 8px;
  }
  
  .mobile-subtitle {
    font-size: 14px;
    color: #666;
    margin: 0;
  }
}

// 标签页
.tabs {
  display: flex;
  border-bottom: 1px solid #e5e6eb;
  margin-bottom: 24px;
  
  .tab-item {
    flex: 1;
    padding: 12px;
    font-size: 16px;
    font-weight: 500;
    color: #86909c;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s;
    
    &.active {
      color: #165DFF;
      border-bottom-color: #165DFF;
    }
    
    &:hover:not(.active) {
      color: #4e5969;
    }
  }
}

.form-content {
  flex: 1;
}

.form-header {
  margin-bottom: 32px;

  .form-title {
    font-size: 28px;
    font-weight: 700;
    color: #1d2129;
    margin: 0 0 12px;
  }

  .form-subtitle {
    font-size: 15px;
    color: #86909c;
    margin: 0;
    line-height: 1.6;
  }
}

.auth-form {
  :deep(.arco-form-item) {
    margin-bottom: 20px;
  }

  :deep(.arco-input-wrapper),
  :deep(.arco-input-password) {
    height: 44px;
    border-radius: 8px;
    border: 1px solid #e5e6eb;
    transition: all 0.3s ease;

    &:hover {
      border-color: #165DFF;
    }

    &:focus-within {
      border-color: #165DFF;
      box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.12);
    }
  }

  :deep(.arco-input),
  :deep(.arco-input-password input) {
    font-size: 15px;
  }
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 28px;

  .remember-text {
    color: #4e5969;
    font-size: 14px;
  }

  .forgot-link {
    font-size: 14px;
    color: #165DFF;
    
    &:hover {
      color: rgba(22, 93, 255, 0.8);
    }
  }
}

.submit-btn {
  height: 48px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  background: #165DFF;
  border: none;
  box-shadow: 0 4px 12px rgba(22, 93, 255, 0.3);
  transition: all 0.3s ease;

  &:hover {
    background: rgba(22, 93, 255, 0.9);
    box-shadow: 0 6px 16px rgba(22, 93, 255, 0.4);
    transform: translateY(-2px);
  }

  &:active {
    transform: translateY(0);
  }
}

.register-btn {
  background: #36CFC9;
  box-shadow: 0 4px 12px rgba(54, 207, 201, 0.3);

  &:hover:not(:disabled) {
    background: rgba(54, 207, 201, 0.9);
    box-shadow: 0 6px 16px rgba(54, 207, 201, 0.4);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.switch-link-section {
  text-align: center;
  margin: 24px 0;

  .switch-text {
    color: #86909c;
    font-size: 14px;
  }

  .switch-link {
    color: #165DFF;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    
    &:hover {
      color: rgba(22, 93, 255, 0.8);
      text-decoration: underline;
    }
  }
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 28px 0 20px;
  gap: 16px;

  &::before,
  &::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e6eb;
  }

  span {
    color: #86909c;
    font-size: 14px;
    white-space: nowrap;
  }
}

.social-login {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 8px;

  .social-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #e5e6eb;
    background: none;
    font-size: 20px;
    color: #4e5969;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      border-color: #165DFF;
      color: #165DFF;
      background: rgba(22, 93, 255, 0.08);
    }
  }
}

.agree-text {
  color: #4e5969;
  font-size: 14px;
  margin: 0 4px;
}

.terms-link {
  font-size: 14px;
  color: #165DFF;
  
  &:hover {
    color: rgba(22, 93, 255, 0.8);
  }
}
</style>

